<template>
  <div class="home">
    <yd-slider autoplay="3000" pagination-color="#fff" pagination-activecolor="#04a25c">
      <yd-slider-item v-for="(banner, index) in banners" :key="index">
        <a :href="banner.url">
          <img :src="banner.img_url">
        </a>
      </yd-slider-item>
    </yd-slider>
    
    <div class="menu-top" v-cloak>
      <a v-for="(menu, index) in menus" :key="index" :href="menu.link" class="menu-top-item">
          <div class="menu-top-item-l">
              <img class="menu-icon" :src="menu.icon" alt="">
          </div>
          <div class="menu-top-item-r">
              <div class="menu-top-label">{{ menu.title }}</div>
              <div class="menu-top-des">{{ menu.des }}</div>
          </div>
      </a>
    </div>

    <div class="pane-home" v-cloak>
        <div class="pane-home-h">
            <div class="title">推荐分类</div>
            <a href="#" class="more">更多分类 ></a>
        </div>
        <div class="pane-home-b">
            <div class="cate-home clearfix">
                <a v-for="(cate, index) in cates" :key="index" :href="cate.link" class="cate-home-item">
                    <div class="cate-home-item-icon">
                        <img :src="cate.img_url" alt="">
                    </div>
                    <div class="cate-home-item-label">
                      {{ cate.name }}
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="pane-home rcd-home" style="background: transparent" v-cloak>
      <div class="pane-home-h">
        <div class="title">为你推荐</div>
      </div>
      <div class="pane-home-b">
        <ul class="pro-rcd-list clearfix">
          <li v-for="(rcd, index) in rcds" :key="index" class="pro-rcd-item">
            <a :href="'product/' + rcd.id + '.html'">
                <div class="pro-rcd-img">
                    <img :src="rcd.cover_image" alt="">
                </div>
                <div class="pro-rcd-item-f">
                    <div class="pro-rcd-name">
                      <span v-if="rcd.self_support" class="badge-zy">自营</span>
                      {{ rcd.name }}
                    </div>
                    <div class="pro-rcd-item-fb">
                        <div class="price">
                            ¥{{ rcd.price }}
                        </div>
                        <div class="des">
                            现货
                        </div>
                    </div>
                </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    
    <yd-tabbar :fixed='true' active-color="#04a25c">
      <yd-tabbar-item title="首页" type="a" link="/" active>
        <yd-icon name="home-outline" slot="icon" style="line-height: 1" size="0.5rem"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="自营店" type="a" link="#">
        <yd-icon name="discover" slot="icon" style="line-height: 1" size="0.5rem"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="个人中心" type="a" link="#">
        <yd-icon name="ucenter-outline" slot="icon" style="line-height: 1" size="0.5rem"></yd-icon>
      </yd-tabbar-item>
    </yd-tabbar>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        banners: [],
        menus: [
          {   
            title: '供应大厅',
            des: '步步领鲜 食全食美', 
            icon: './images/icon/gydt.svg', 
            link: '/market.html'
          },
          { 
            title: '全国行情',
            des: '行情走势 尽在掌中', 
            icon: './images/icon/hq.svg', 
            link: '/market'
          },
        ],
        cates: [
          {name: '龙虾', img_url: './images/icon/lobster.svg', link: '/market.html?cid=4'},
          {name: '螃蟹', img_url: './images/icon/xie.svg', link: '/market.html?cid=5'},
          {name: '笼子', img_url: './images/icon/lz.svg', link: '/market.html?cid=6'},
          {name: '饵料', img_url: './images/icon/yer.svg', link: '/market.html?cid=8'}
        ],
        rcds: []
      }
    },
    created() {
      this.inntShow();
      this.getRcds();
    },
    methods: {
      inntShow() {
        axios.get('/home/fetchIndex').then(response => {
          this.banners = response.data.data;
        });
      },
      getRcds: function() {
        axios.get('/home/recommend').then(response => {
          this.rcds = response.data.data;
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: 1rem;
}
</style>
